<template>
  <div class="admin-container">
    <!-- 顶部导航 -->
    <el-header class="admin-header">
      <h2>问卷管理系统</h2>
      <nav class="admin-nav">
        <span>欢迎, ture管理员</span>
        <el-button @click="logout" type="primary">退出登录</el-button>
      </nav>
    </el-header>

    <!-- 左侧菜单 -->
    <el-container>
      <el-aside class="admin-sidebar">
        <el-menu
          default-active="$route.path"
          router
          class="admin-menu">
          <el-menu-item index="/admin/surveys">
            <i class="el-icon-document"></i>
            <span>问卷管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/users">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/settings">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主体内容区域 -->
      <el-main class="admin-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  methods: {
    logout() {
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.admin-header {
  background-color: #2c3e50;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-header h2 {
  margin: 0;
}

.admin-sidebar {
  width: 220px;
  background-color: #f8f9fa;
  height: calc(100vh - 60px);
  position: fixed;
  left: 0;
  top: 60px;
  overflow-y: auto;
}

.admin-content {
  margin-left: 220px;
  padding: 2rem;
  background-color: #fff;
  min-height: calc(100vh - 60px);
}
</style>